<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>图片无序加载--QQ表情</title>
        <style type="text/css">
        	body,p,ul,li{
        		margin: 0;
        		padding: 0;
        	}
        	body{
        		background: #eee;
        	}
        	a{
        		text-decoration: none;
        	}
        	.box{
        		margin: 150px 0 0 200px;
        	}
        	#face-btn{
        		display: block;
        		color: #333;
        		text-indent: 20px;
        	}
        	.pannel{
        		width: 390px;
        		padding: 2px;
        		border:1px solid #ccc;
        		background: #fff;
        		display: none;
        	}
        	.loading{
        		text-align: center;
        	}
        	.list li{
        		display: inline-block;
        		list-style: none;
        		width: 30px;
        		height: 30px;
        		cursor: pointer;
        	}
        	.list li img{
        		width: 30px;
        		height: 30px;
        	}
        </style>
    </head>
    <body>
    	<div class="box">
	    	<a href="javascript:;" id="face-btn">表情</a>
	    	<div class="pannel">
		    	<p class="loading">表情加载中，请稍后。。。</p>
		    	<!-- <ul class="list">
		    		<li><img src="img/1.gif" alt=""></li>
		    		<li><img src="img/2.gif" alt=""></li>
		    		<li><img src="img/3.gif" alt=""></li>
		    		<li><img src="img/4.gif" alt=""></li>
		    		<li><img src="img/5.gif" alt=""></li>
		    		<li><img src="img/6.gif" alt=""></li>
		    		<li><img src="img/7.gif" alt=""></li>
		    		<li><img src="img/8.gif" alt=""></li>
		    		<li><img src="img/9.gif" alt=""></li>
		    		<li><img src="img/10.gif" alt=""></li>
		    		<li><img src="img/11.gif" alt=""></li>
		    		<li><img src="img/12.gif" alt=""></li>
		    	</ul> -->
		    </div>
	    </div>

	    <script type="text/javascript" src="js/jquery.min.js"></script>
	    <script type="text/javascript" src="js/perload.js"></script>
	    <script type="text/javascript">
	    	var $btn=$('#face-btn'),
	    		$pannel=$('.pannel');

	    	var imgs=[];
	    	for(var i=0;i<12;i++){
	    		imgs[i]='img/'+(i+1)+'.gif';
	    	}

	    	var len=imgs.length;

	    	$btn.on('click',function(ev){
	    		var ev=window.event||ev;
	    		ev.stopPropagation();//静止事件冒泡
	    		$pannel.show();
	    		$.preload(imgs,{
	    			all:function(){
	    				var html='';
	    				html+='<ul class="list">';
	    				for(var i=0;i<len;i++){
	    					html+='<li><img src="'+imgs[i]+'" alt=""></li>'
	    				}
	    				html+='</ul>';
	    				
	    				//模拟延迟，实际项目不用写
	    				setTimeout(function(){
	    					$pannel.html(html);
	    				},1000)
	    			}
	    		});
	    	})
	    	$(document).on('click',function(){
	    		$pannel.hide();
	    	})
	    </script>
    </body>
</html>